<template>
  <div class="goods-hot">
    <h3>24小时热销榜</h3>
    <ul>
      <li v-for="item in hot1" :key="item.id">
        <img :src="item.picture" alt="" />
        <p>{{ item.name }}</p>
        <p>{{ item.desc }}</p>
        <p>￥{{ item.price }}</p>
      </li>
    </ul>
    <h3 style="margin-top: 20px">周榜热销</h3>
    <ul>
      <li v-for="item in hot2" :key="item.id">
        <img :src="item.picture" alt="" />
        <p>{{ item.name }}</p>
        <p>{{ item.desc }}</p>
        <p>￥{{ item.price }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
// 移入api
import { getHot1, getHot2 } from "@/utils/Api/DetailApi";
export default {
  data() {
    return {
      hot1: [],
      hot2: [],
    };
  },
  async mounted() {
    let obj = {
      id: this.$route.query.id,
      limit: 3,
      type: 1,
    };
    // 请求24小时热销数据
    let { data } = await getHot1(obj);
    this.hot1 = data.result;
    let obj2 = {
      id: this.$route.query.id,
      limit: 3,
      type: 2,
    };
    // 请求24小时热销数据
    let { data: res } = await getHot1(obj2);
    this.hot2 = res.result;
  },
};
</script>

<style lang="scss" scoped>
ul {
  width: 100%;
  li {
    width: 100%;
    padding: 20px 30px;
    background-color: white;
    margin-top: 10px;
    height: 340px;
    img {
      width: 200px;
      height: 200px;
    }
    p {
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      text-align: center;
      &:nth-child(4) {
        color: red;
      }
    }
  }
}
.goods-hot {
  width: 280px;
  h3 {
    height: 70px;
    background: #e26237;
    color: #fff;
    font-size: 18px;
    line-height: 70px;
    padding-left: 25px;
    margin-bottom: 10px;
    font-weight: normal;
  }
  ::v-deep .goods-item {
    background: #fff;
    width: 100%;
    margin-bottom: 10px;
    p {
      margin: 0 10px;
    }
    &:hover {
      transform: none;
      box-shadow: none;
    }
  }
}
</style>
